<template>
    <view class="personal-info">
        <image class="bg" :src="bg_image" />
        <view class="flex flex-row">
            <!-- 左侧圆形占位符 -->
            <view class="avatar-placeholder"></view>
 
            <!-- 右侧信息区域 -->
            <view class="flex flex-row-center-between">
                <view>
                    <view class="flex flex-row-bottom-start mb-12">
                        <tm-text class="mr-16" :font-size="32" _class="text-weight-b" color="#333333"
                            :label="'本命主: ' + (userInfo?.name || '')"></tm-text>
                    </view>
                    <!-- 阳历 -->
                    <view class="flex flex-row-center-start mb-12">
                        <tm-text :font-size="24" color="#444444" :label="dateFormat"></tm-text>
                    </view>
                    <!-- 农历 -->
                    <view class="flex flex-row-center-start mb-12">
                        <tm-text :font-size="24" color="#444444" :label="lunarDateFormat"></tm-text>
                    </view>
                    <view class="flex flex-row-center-start">
                        <tm-text :font-size="24" color="#444444" :label="dateFormatText"></tm-text>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script lang="ts" setup>
    import { computed, toRefs, watch } from "vue";
    import dayjs from "dayjs";
    import { PluginLunar } from "dayjs-plugin-lunar";
    import bg_image from '/static/assets/images/index/personal-bg.png'
    import { isEmpty } from "lodash";
    import { useUserStore } from "/stores/user.ts";
    import { GENDER } from "/enums/Enum.ts";
    import { storeToRefs } from 'pinia'
    dayjs.extend(PluginLunar);
    const props = defineProps({
        personalInfo: {
            type: Object,
            default: () => ({})
        },
    })

    const userStore = useUserStore();
    const { userInfo = {} } = storeToRefs(userStore)

    const dateFormat = computed(() => {
        return dayjs(userInfo.value?.solarBirthday || '').format('YYYY年MM月DD日')
    })

    const HourFormat = computed(() => {
        return dayjs(userInfo.value?.solarTime || '').format('HH')
    })

    const MinuteFormat = computed(() => {
        return dayjs(userInfo.value?.solarTime || '').format('mm')
    })

    const SecondFormat = computed(() => {
        return dayjs(userInfo.value?.solarTime || '').format('ss')
    })

    const lunarDateFormat = computed(() => {
        return dayjs(userInfo.value?.solarBirthday || '').format('LY年LMLD')
    })

    const dateFormatText = computed(() => {
        const date = props.personalInfo
        if (isEmpty(date))
            return ''
        return `${date?.sixtyCycle?.year}年 ${date?.sixtyCycle?.month}月 ${date?.sixtyCycle?.day}日`
    })
</script>
<style lang="less" scoped>
    .personal-info {
        position: relative;
        padding: 24rpx 50rpx;
        z-index: 0;

        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .avatar-placeholder {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background-color: #F5F5F5;
            margin-right: 20px;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
</style>